<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>upload</title>
    <style type="text/css">
        body{font-family: "microsoft yahei";font-size: 14px;margin:0;padding:0;}
        p{margin:0;padding:0;}
        .demo{width:342px; margin:40px auto 0 auto; min-height:150px;}
        .preview{width:200px;border:solid 1px #dedede;padding:10px;}
        .demo p{color: #666;}
        .demo p input{width: 260px;height:28px;line-height: 28px;color:#666;font-size:14px;border:1px solid #ddd;padding-left: 8px;outline: 0;font-family: "microsoft yahei";}
        .demo p.tips{line-height:26px;color:#999;margin-bottom: 10px;font-size: 12px;}
        #up_status{margin-top: 15px;}
        .btn{position: relative;overflow: hidden;margin: 15px 4px 5px 0;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
        .btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
        #preview p{width:222px;text-align:center;}
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.form.js"></script>
</head>
<body>
<div class="demo">
    <form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
        <p>简短描述：<input type="text" name="imgTit"></p>
        <div id="up_status" style="display:none"><img src="../images/loader.gif" alt="uploading"/></div>
        <div id="up_btn" class="btn">
            <span>上传图片</span>
            <input id="photoimg" type="file" name="photoimg">
        </div>
    </form>
    <p class="tips">最大100KB，支持jpg，gif，png格式。</p>
    <div id="preview"></div>
</div>
<script type="text/javascript">
    $(function(){
        $('#photoimg').die('click').live('change', function(){
            var status = $("#up_status");
            var btn = $("#up_btn");
            $("#imageform").ajaxForm({
                target: '#preview',
                beforeSubmit:function(){
                    status.show();
                    btn.hide();
                },
                success:function(){
                    status.hide();
                    btn.show();
                },
                error:function(){
                    status.hide();
                    btn.show();
                } }).submit();
        });
    });
</script>
</body>
</html>